<template>
  <div class="navigation-bar">
    <div class="navigation">
      <van-nav-bar class="nav">
        <!-- left	自定义左侧区域内容 -->
        <template #left>
          <span v-if="isHome" class="log">石头商城</span>
          <van-icon v-else name="arrow-left" color="#000000" @click="$router.back()" class="log2" size="22"/>
        </template>
        <!-- title	自定义标题 -->
        <template #title v-if="!isHome">
          <div class="title">{{ title }}</div>
        </template>
        <!-- right	自定义右侧区域内容 -->
        <template #right v-if="isHome">
          <div class="right">
            <!-- 购物车 -->
            <van-icon
              name="https://files.roborock.com/mini_img/index/cart.png"
              @click="gotoPage('shoppingCart')"
              size="30"/>
            <!-- 我的 -->
            <van-icon
              name="https://files.roborock.com/mini_img/index/profile.png"
              @click="gotoPage('mine')"
              size="30"/>
          </div>
        </template>
      </van-nav-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavigationBar",
  props: {
    isHome: {
      type: Boolean,
      default: false
    },
    title: String
  },
  data() {
    return {}
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {},
// 生命周期
  created() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>

.navigation-bar {
  width: 100vw;
  max-width: 100vw;
  height: 44px;
  background-color: #f5f5f5;

  .navigation {
    width: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    background-color: #f5f5f5;
    z-index: 100;

    ::v-deep.van-nav-bar__content {
      height: 44px;
    }

    .nav {
      background-color: #f5f5f5;

      ::v-deep.van-nav-bar__left {
        padding: 0;
      }

      .log {
        font-size: 20px;
        text-align: left;
        color: #4a4a4a;
        font-family: HarmonyOSHansMedium, serif;
        padding: 0 20px;
      }

      .log2 {
        padding: 0 10px;
        font-size: 22px;
        font-weight: 500;
      }

      .title {
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }

      ::v-deep.van-nav-bar__right {
        padding: 0;
      }

      .right {
        width: 73px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20px;
      }
    }
  }
}


</style>